<template>
  <section id="ibu-hotel-detail-head" class="hotel-detail_head">
    <div class="detail-headline_container">
      <div class="detail-headline_base">
        <div class="detail-headline_title ">
          <h1 class="detail-headline_name  ">{{detailInfo[0].name}}</h1><img class="detail-headline_new_level" src="../assets/images/hotel_detail_icon_diamond4_20180824.png" alt="hotel-level"><span class="badge-thumb badge-thumb-24"></span>
        </div>
        <div class="detail-headline_address">
          <div class="detail-headline_position"><i class="iconfont icon-position detail-headline_position_icon" type="locate"></i><span class="detail-headline_position_info"><span class="detail-headline_position_text">{{detailInfo[0].address}}</span></span></div>
          <div class="detail-headline_desc"><i class="iconfont icon-hotel1 detail-headline_desc_icon" type="ic_group_company"></i><span class="detail-headline_desc_text">{{detailInfo[0].bullet_screen_info}}</span></div>
        </div>
      </div>
      <div class="detail-head-price_container">
        <div class="detail-head-price_price_box">
          <div class="detail-head-price_price_contain"><span class="detail-head-price_price ctripPrice null">￥{{detailInfo[0].min_price}} <span class="price-qi">起</span></span></div>
        </div>
        <div class="detail-head-price_select">选择房间</div>
      </div>
    </div>
    <div class="detail-headcontext">
      <div class="detail-headalbum_container">
        <div class="detail-headalbum_box">
          <div class="detail-headalbum_bigpic">
            <div style="position: absolute; inset: 0px;"><img class="detail-headalbum_bigpicImg" alt="酒店图片" :src="detailInfo[0].main_photo" @click="showImg(detailInfo[0].main_photo,true)"></div>
          </div>
          <div class="detail-headalbum_childbox">
            <template v-for="(img,index) in images">
              <div class="detail-headalbum_item" v-if="index<6" :class="{'padding-botttom':index>3}" :key="index">
                <div class="m-img " style="width: 100%; height: 100%;">
                  <img :src="'http'+img.split('http')[1]" alt="" style="width:100%;height:100%" @click="showImg('http'+img.split('http')[1],true)">
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="detail-headcontext_side">
        <div class="detail-headreview_container detail-headreview_container_disable__left">
          <div class="detail-headreview_container_tab">
            <div class="detail-headreview_info">
              <div class="detail-headreview_sum">
                <p class="detail-headreview_score"><span class="detail-headreview_score_box"><b class="detail-headreview_score_value">{{detailInfo[0].health_score}}</b><span class="detail-headreview_score_fen">分</span></span><span class="detail-headreview_score_text">超棒</span></p>
                <p class="detail-headreview_all">共有{{detailInfo[0].comment_total}}条点评</p>
                <p class="detail-headreview_quality">{{detailInfo[0].zone}}</p>
              </div>
              <div class="detail-headreview_box">
                <div class="detail-headreview_bubble"></div>
                <div class="detail-headreview_content">
                  <div class="detail-headreview_content_text"><span class="detail-headreview_keyword" v-html="detailInfo[0].description"></span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-headtraffic_container">
          <div class="detail-data-map">
            <div class="detail-headtraffic_map_icon"></div>
            <div><span class="detail-headtraffic_traffic_showmore" style="margin-top: 3px;">查看地图</span></div>
          </div>
          <div class="detail-headtraffic_map_side">
            <div class="detail-headtraffic_traffic">
              <ul class="detail-headtraffic_traffic_list">
                <li v-for="(list,index) in traffic" :key="index">{{list}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="detail-headamenity_container">
          <div class="detail-headamenity_list detail-headamenity_list_show"><span class="detail-headamenity_item detail-headamenity_name">24小时大堂经理</span></div>
          <div class="detail-headamenity_showmore"><span class="detail-headamenity_link">显示所有设施</span></div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HotelDetailHead',
  data() {
    return {
      // images: ''
    }
  },
  computed: {
    ...mapState({
      detailInfo: state => {
        return state.detail.detailInfo
      },
      images: state => {
        return state.detail.detailInfo[0].images.split(';')
      },
      traffic: state => {
        return state.detail.detailInfo[0].traffic.split('###')
      }
    })
  },
  methods: {
    showImg(imgUrl, tag) {
      // console.log(img,t);
      this.$store.dispatch('showBigImg', {
        imgUrl,
        tag
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hotel-detail_head {
  background-color: #fff;
  padding: 16px 24px;
  margin-bottom: 8px;
  .detail-headline_container {
    display: flex;
    .detail-headline_base {
      max-width: 57%;
      flex: auto;
      .detail-headline_title {
        width: 100%;
        margin-bottom: 6px;
        .detail-headline_name {
          font-size: 20px;
          color: #0f294d;
          display: inline;
          margin-right: 8px;
        }
        .detail-headline_new_level {
          height: 18px;
          margin-bottom: 5px;
          margin-right: 5px;
        }
        .badge-thumb {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 8px;
          position: relative;
          line-height: 20px;
          vertical-align: sub;
          cursor: pointer;
        }
        .badge-thumb-24 {
          background: url('../assets/images/badge-thumb-24.png') no-repeat 50%;
          background-size: 16px 16px;
        }
      }
    }
    .detail-headline_address {
      .detail-headline_position {
        display: inline-block;
        margin-bottom: 6px;
        align-items: baseline;
      }
      .detail-headline_position_icon {
        color: #acb4bf;
        margin-right: 4px;
        font-size: 14px;
        position: absolute;
      }
      .icon-position {
        font-size: 16px;
      }
      .detail-headline_position_info {
        font-size: 14px;
        color: #455873;
        letter-spacing: 0;
        text-align: left;
        line-height: 18px;
        margin-left: 2px;
        padding-left: 14px;
        display: inline-block;
        .detail-headline_position_text {
          margin-right: 4px;
        }
        .detail-headline_position_showmore {
          font-size: 14px;
          color: #287dfa;
          font-weight: 700;
          cursor: pointer;
          word-break: keep-all;
        }
      }
      .detail-headline_desc {
        display: flex;
        align-items: baseline;
        font-size: 14px;
        .detail-headline_desc_icon {
          color: #acb4bf;
          margin-right: 2px;
        }
        .icon-hotel1 {
          font-size: 16px;
        }
        .detail-headline_desc_ky,
        .detail-headline_desc_text {
          text-align: left;
          letter-spacing: 0;
          color: #455873;
          margin-right: 4px;
        }
        .detail-headline_desc_ky {
          width: 78px;
          flex: none;
        }
        .detail-headline_desc_text {
          line-height: 18px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 0 1 auto;
        }
        .detail-headline_desc_showmore {
          font-size: 14px;
          color: #287dfa;
          letter-spacing: 0;
          text-align: right;
          line-height: 18px;
          flex: none;
          font-weight: 700;
          cursor: pointer;
        }
      }
    }
    .detail-head-price_container {
      flex: auto;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding: 4px;
      align-items: flex-end;
      .detail-head-price_price_box {
        margin-right: 8px;
        align-items: center;
        line-height: 22px;
        .detail-head-price_reduce_price {
          width: 100%;
          display: flex;
          justify-content: flex-end;
        }
        .detail-head-price_reduce_price_span {
          font-weight: 500;
          font-size: 14px;
          color: #fff;
          text-align: center;
          background: #f5594a;
          padding: 0 8px;
          border-radius: 2px;
          margin-bottom: 8px;
          position: relative;
          &:after {
            content: '';
            position: absolute;
            top: 20px;
            right: 0;
            border-top: 6px solid #f5594a;
            border-left: 6px solid transparent;
          }
        }
        .detail-head-price_price_contain {
          display: flex;
        }
        .detail-head-price_delete_price {
          font-size: 14px;
          color: #455873;
          margin-right: 8px;
        }
        .ctripPrice {
          display: block;
        }
        .detail-head-price_price {
          font-weight: 700;
          font-size: 24px;
          color: #287dfa;
          text-align: right;
        }
        .price-qi {
          font-size: 14px;
          color: #455873;
          margin-left: 1px;
        }
      }
      .detail-head-price_select {
        padding: 8px 16px;
        background: #287dfa;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
      }
    }
  }
  .detail-headcontext {
    display: flex;
    margin: 8px 0;
    .detail-headalbum_container {
      display: flex;
      width: 100%;
      position: relative;
      max-width: 57%;
      padding-bottom: 25%;
      height: 0;
      .detail-headalbum_box {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        .detail-headalbum_bigpic {
          position: relative;
          width: 59.8%;
          height: 100%;
          display: inline-block;
          cursor: pointer;
          .detail-headalbum_bigpicImg {
            height: 100%;
            width: 100%;
          }
          .detail-headalbum_focus_mask {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            background-image: linear-gradient(180deg, transparent, rgba(15, 41, 77, 0.5));
            .detail-headalbum_focus_des {
              position: absolute;
              right: 16px;
              bottom: 14px;
              color: #fff;
              font-size: 14px;
              font-weight: 700;
            }
          }
          .detail-headalbum_collect {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 16px;
            top: 16px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 1px 8px 0 rgb(0 0 0 / 13%);
            cursor: pointer;
          }
          .detail-headalbum_collect_icon {
            font-size: 26px;
            color: #acb4bf;
          }
        }
        .detail-headalbum_childbox {
          display: inline-block;
          width: 40.2%;
          height: 100%;
          .detail-headalbum_item {
            background-size: cover;
            cursor: pointer;
            width: 50%;
            height: 33.3%;
            float: left;
            padding-left: 8px;
            padding-bottom: 8px;
            box-sizing: border-box;
            &:nth-child(5),
            &:nth-child(6) {
              padding-bottom: 0;
            }
            .m-img {
              display: inline-flex;
              opacity: 1;
              transition: all 0.45s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
    .detail-headcontext_side {
      max-width: 43%;
      flex: auto;
      padding: 0 0 8px 16px;
      position: relative;
      .detail-headreview_container {
        display: flex;
        align-items: center;
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f2f5;
        margin-bottom: 12px;
        max-width: 460px;
        justify-content: flex-end;
        .detail-headreview_container_tab {
          width: 98%;
          height: 94px;
          margin-top: 10px;
          .detail-headreview_info {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .detail-headreview_sum {
              width: calc(55% - 15px);
              display: flex;
              flex-direction: column;
              .detail-headreview_score {
                margin-bottom: 4px;
                .detail-headreview_score_box {
                  background-color: #4978ce;
                  padding: 3px 8px;
                  border-radius: 2px;
                  font-size: 22px;
                  line-height: 22px;
                  color: hsla(0, 0%, 100%, 0.6);
                  font-weight: 700;
                  cursor: pointer;
                  white-space: nowrap;
                  display: inline-block;
                  .detail-headreview_score_value {
                    color: #fff;
                    font-size: 20px;
                    margin-right: 2px;
                  }
                  .detail-headreview_score_fen {
                    font-size: 16px;
                    line-height: 22px;
                    color: #fff;
                    font-weight: 500;
                    opacity: 0.6;
                  }
                }
                .detail-headreview_score_text {
                  color: #4978ce;
                  font-size: 20px;
                  margin-left: 8px;
                  font-weight: 700;
                  position: relative;
                  top: 1px;
                }
              }
              .detail-headreview_all {
                margin-bottom: 4px;
                font-size: 14px;
                color: #287dfa;
                font-weight: 700;
                cursor: pointer;
                white-space: nowrap;
              }
              .detail-headreview_quality {
                margin-bottom: 4px;
                font-size: 14px;
                color: #06aebd;
                font-weight: 400;
                white-space: nowrap;
              }
            }
            .detail-headreview_box {
              position: relative;
              width: 45%;
              .detail-headreview_bubble {
                padding: 8px;
                transform: rotate(45deg);
                background-color: #f5f9ff;
                position: absolute;
                left: -4px;
                top: 20px;
              }
              .detail-headreview_content {
                background: #f5f9ff;
                height: 54px;
                max-width: 198px;
                margin-left: 20px;
                position: relative;
                overflow: hidden;
                outline: 15px solid #f5f9ff;
                &:before {
                  float: left;
                  width: 100px;
                  content: '';
                  height: 54px;
                }
                &:after {
                  float: right;
                  content: '...';
                  height: 18px;
                  line-height: 18px;
                  width: 30px;
                  position: relative;
                  left: calc(100% - 100px);
                  top: -18px;
                  text-align: right;
                  background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), to(#f5f9ff), color-stop(50%, #f5f9ff));
                  background: -moz-linear-gradient(to right, hsla(0, 0%, 100%, 0), #f5f9ff 50%, #f5f9ff);
                  background: -o-linear-gradient(to right, hsla(0, 0%, 100%, 0), #f5f9ff 50%, #f5f9ff);
                  background: -ms-linear-gradient(to right, hsla(0, 0%, 100%, 0), #f5f9ff 50%, #f5f9ff);
                  background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #f5f9ff 50%, #f5f9ff);
                }
                .detail-headreview_content_text {
                  float: right;
                  margin-left: -100px;
                  width: 100%;
                  word-break: break-all;
                  line-height: 18px;
                  font-size: 14px;
                  color: #455873;
                  letter-spacing: 0;
                  font-family: PingFangSC-Regular;
                }
              }
            }
          }
        }
      }
      .detail-headtraffic_container {
        display: flex;
        justify-content: space-between;
        padding-bottom: 25px;
        border-bottom: 1px solid #f0f2f5;
        margin-bottom: 12px;
        max-width: 460px;
        cursor: pointer;
        .detail-headtraffic_map_icon {
          background: url('../assets/images/map.dcd8ad63dace8415362d5afbfdb19b7d.png') 50% / cover;
          max-width: 98px;
          height: 98px;
          width: 24%;
          cursor: pointer;
        }
        .detail-headtraffic_map_side {
          max-width: 346px;
          width: 76%;
          display: flex;
          flex-direction: column;
          .detail-headtraffic_traffic_list {
            // display: flex;
            // justify-content: flex-start;
            .item {
              margin-right: 30px;
            }
            .item_icon {
              font-size: 20px;
              display: flex;
              i {
                vertical-align: text-top;
              }
              .icon-aircraft {
                font-size: 16px;
              }
            }
            .item_distance {
              font-size: 14px;
              color: #0f294d;
              letter-spacing: 0;
              text-align: left;
              line-height: 18px;
              margin-left: 4px;
              cursor: pointer;
              border-bottom: 1px dotted #0f294d;
            }
          }
          .detail-headtraffic_traffic_desc {
            overflow: hidden;
            height: 44px;
            margin-bottom: 4px;
            &:before {
              float: left;
              width: 100px;
              content: '';
              height: 44px;
            }
            &:after {
              float: right;
              content: '...';
              height: 22px;
              line-height: 22px;
              width: 30px;
              position: relative;
              left: calc(100% - 100px);
              top: -22px;
              text-align: right;
              background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), to(#fff), color-stop(50%, #fff));
              background: -moz-linear-gradient(to right, hsla(0, 0%, 100%, 0), #fff 50%, #fff);
              background: -o-linear-gradient(to right, hsla(0, 0%, 100%, 0), #fff 50%, #fff);
              background: -ms-linear-gradient(to right, hsla(0, 0%, 100%, 0), #fff 50%, #fff);
              background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 50%, #fff);
            }
            .detail-headtraffic_traffic_desc_content {
              font-size: 14px;
              color: #8592a6;
              letter-spacing: 0;
              text-align: left;
              line-height: 22px;
              float: right;
              margin-left: -100px;
              word-break: break-all;
              width: 100%;
            }
          }
          .detail-headtraffic_traffic_showmore {
            font-size: 14px;
            color: #287dfa;
            letter-spacing: 0;
            text-align: left;
            line-height: 18px;
            cursor: pointer;
            font-weight: 700;
          }
        }
      }
      .detail-headamenity_container {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        overflow: hidden;
        height: 18px;
        .detail-headamenity_list {
          flex-shrink: 0;
          max-width: 330px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          .detail-headamenity_name {
            font-size: 14px;
            color: #0f294d;
            letter-spacing: 0;
            text-align: left;
            line-height: 18px;
            align-items: baseline;
            &:last-child {
              padding-right: 4px;
            }
          }
        }
        .detail-headamenity_name {
          display: inline-block;
        }
        .detail-headamenity_link {
          font-size: 14px;
          color: #287dfa;
          letter-spacing: 0;
          line-height: 18px;
          cursor: pointer;
          font-weight: 700;
        }
      }
    }
  }
}
.padding-botttom {
  padding-bottom: 0 !important;
}
.detail-data-map {
  max-width: 98px;
  height: 98px;
  width: 24%;
  cursor: pointer;
  text-align: center;
  .detail-headtraffic_map_icon {
    width: 100% !important;
  }
}
</style>